<template>
	<view class="container">
		<!-- 自定义头部 -->
		<BhTitle titleText="编辑昵称"></BhTitle>

		<view>
			<view class="avatar-wrap bh-row bh-justify-space-between">
				<view class="label">用户头像</view>
				<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="avatarUrl" class="refreshIcon"></image>
				</button>
			</view>
			<view class="nickname-wrap bh-row bh-justify-start">
				<view class="label">用户昵称</view>
				<input type="nickname" v-model="nickname"  @change="bindinput"  placeholder="不超过7个字（必填）" class="nickname" />
			</view>

		</view>
		<view class="bh-round-btn" @click="updateSubmit">保存修改</view>
	</view>
</template>

<script>
	import {
		Api
	} from '../../api/api';
	import {
		Dict
	} from '../../components/custom_views/dict';
	import {
		commonMixin
	} from '../../components/custom_views/mixin';
	import BhTitle from '../../components/custom_views/bh-title.vue'
	import { CustRequest } from "../../api/cust_request";
	import { TencentCosApi } from "../../api/tencent_cos_api";

	export default {
		components: {
			BhTitle
		},
		mixins: [commonMixin],
		data() {
			return {
				nickname: this.$store.state.sessionDto.userDto.nickName,
				avatarUrl: this.$store.state.sessionDto.userDto.avatarUrl,
			}
		},
		computed: {},
		// 页面周期函数--监听页面加载
		onLoad(options) {},
		methods: {
			bindinput(e) {
				
				this.nickname = e.detail.value; // 获取微信昵称
			},
			onChooseAvatar(e) {
				let that = this
				function getUuiD(randomLength) {
				  return Number(Math.random().toString().substr(2, randomLength) + Date.now()).toString(36)
				}
				let tempFilePath = e.detail.avatarUrl
				let genFileName = getUuiD(32) + tempFilePath.substring(tempFilePath.lastIndexOf("."))
				uni.uploadFile({
				  url: TencentCosApi.uploadImageUrl,
				     header: {
				    'userId': that.$store.state.sessionDto.userDto.userId
				  },
				  filePath: tempFilePath,
				  name: 'file',
				  formData: {
				    // 'fileName': 'aaa' + tempFilePath.substring(tempFilePath.lastIndexOf('.'))
				    'fileName': genFileName,
				  },
				  success: (res) => {
				    let custRes = JSON.parse(res.data)
					this.avatarUrl = custRes.data
				  },
				  fail: (err) => {
				    console.error('上传失败', err);
				  },
				})
			},
			onChangeFooterTab(footerTab) {
				console.log('点击的footer信息', footerTab)
				if (footerTab.index == 1) {
					this.showPostAdd = true
				} else if (footerTab.index == 0) {
					uni.redirectTo({
						url: '/pages/home/home'
					})
				}
			},
			updateSubmit(){
				let that = this
				Api.UserApi.updateNickNameAndAvatarUrl(that,this.nickname,this.avatarUrl, (res) => {
					if(res.code == 200){
						wx.showToast({
						  title: '修改成功！',
						  icon: 'success',
						  duration: 2000
						})
						setTimeout(()=>{
							wx.navigateBack({
								delta: 1
							})
						},2000)
						
					}
				})
			},
		},

		// 页面周期函数--监听页面初次渲染完成
		onReady() {},
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() {},
		// 页面周期函数--监听页面隐藏
		onHide() {},
		// 页面周期函数--监听页面卸载
		onUnload() {},
		// 页面处理函数--监听用户下拉动作
		// onPullDownRefresh() { uni.stopPullDownRefresh(); },
		// 页面处理函数--监听用户上拉触底
		// onReachBottom() {},
		// 页面处理函数--监听页面滚动(not-nvue)
		// onPageScroll(event) {},
		// 页面处理函数--用户点击右上角分享
		// onShareAppMessage(options) {},
	}
</script>

<style scoped lang="scss">
	@import url(../../static/css/base.css);

	button {
		background-color: #fff;
		border-radius: 60rpx;
		padding: 0;
		margin: 0;
		width: 1rpx;
		height: 1rpx;
		overflow: visible;
		margin-right: 100rpx;

		.refreshIcon {
			width: 120rpx;
			height: 120rpx;
			border-radius: 120rpx;
			position: absolute;
			left: -30rpx;
			top: -45rpx;
			z-index: 2;
		}

	}

	page {
		height: 100vh;

		.bh-round-btn {
			position: fixed;
			left: 0;
			bottom: 50rpx;
			right: 0;
			margin: auto;
		}
	}

	.bh-dialog-view {
		padding-top: 10rpx;

		>view {
			height: 112rpx;
			line-height: 112rpx;
			text-align: center;
		}
	}

	.container {
		background-color: #F5F9FA;
		width: 100%;
		height: 100vh;
	}

	.title {
		font-size: 28rpx;

		color: #999999;
		margin: 32rpx 32rpx 0 32rpx;
	}

	.label {
		font-size: 28rpx;
		font-weight: 600;
		width: 176rpx;

		color: rgba(0, 0, 0, 0.85);
	}

	.avatar-wrap {
		height: 144rpx;
		opacity: 1;
		padding-left: 32rpx;
		padding-right: 64rpx;
		font-size: 28rpx;
		background: #FFFFFF;


	}

	.nickname-wrap {
		background: #FFFFFF;
		height: 88rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;

		.nickname {}
	}

	.title1 {
		margin-top: 16rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		font-size: 24rpx;
		font-weight: normal;

		color: #999999;
	}
</style>